<template>
	<view class="wrapper">
		<view class="concat_wrapper">
			<u-cell :border="false">
				<u--text slot="title" text="机构信息" size="18" bold></u--text>
				<u--text slot="value" text="联系房东" prefixIcon="phone-fill" align="right" size="15" color="#f56e3d"
					@click.native="contactLandlord(info)" iconStyle="color:#f56e3d"></u--text>
			</u-cell>
		</view>
		<view class="concat_wrapper">
			<u-cell :border="false">
				<u--text  slot="title" text="【机构名称】" size="15" ></u--text>
				<u--text slot="value" :text="info.landlordName" align="left" style="margin-left: -30%;" size="15"></u--text>
			</u-cell>
			<u-cell :border="false">
				<u--text slot="title" text="【备注内容】" size="15"></u--text>
				<u--text slot="value" :text="info.remark" align="left" size="15" style="margin-left: -30%;" ></u--text>
			</u-cell>
		</view>
		<view class="concat_wrapper">
			<u-cell :border="false">
				<u--text slot="title" text="房源信息" size="18" bold></u--text>
			</u-cell>
			<u-cell :border="false">
				<u--text slot="title" text="【房源详情】" size="15"></u--text>
				<u--text slot="value" :text="info.houseName" align="left" size="15" style="margin-left: -30%;" :lines='1'></u--text>
			</u-cell>
			<u-cell :border="false">
				<u--text slot="title" text="【小区地址】" size="15"></u--text>
				<u--text slot="value" :text="info.locationAddress" align="left" style="margin-left: -30%;" size="15"></u--text>
			</u-cell>
			<u-cell :border="false">
				<u--text slot="title" text="【每月租金】" size="15"></u--text>
				<u--text slot="value" :text="info.rental" align="left" style="margin-left: -30%;" size="15"></u--text>
			</u-cell>
		</view>

        <u-popup :show="cancelReasonShow" mode="center"  @close="closeCancelReasonAlert()"
		                    
							   :closeable="true"
							   :closeOnClickOverlay="true" 
							   style="width:550rpx;">
							   <u-toast ref="uToast"></u-toast>
          <view style="width:550rpx;">
             
			  <!-- 弹窗输入组件 -->
			       
					<u--textarea
												height="70"
												placeholder="请输入不可勘察原因"
												v-model="inputValue"
												maxlength="50"
												count
											></u--textarea>
										<view style="margin-top: 5%;">
										
											<u-button  color="#f56e3d" text="确定" @click="clickCheck(4)" style="width: 30%;margin-left: 60%;height: 70rpx;"></u-button>
										</view>	
											
           </view>
	     </u-popup>


		<view class="bottom">
			<view class="time">
				<u-count-down :time="info.timeLeft?info.timeLeft*1000:0" format="HH:mm:ss" color='' style=""></u-count-down>
			</view>
			<view class="btns">
				<u-button color="#f06868" text="当前不可验" @click="showCancelReason()"></u-button>
				<view class="space"></view>
				<u-button color="#f56e3d"  text="当前可勘察"  @click="clickCheck(2)"></u-button>
			</view>
		</view>
		
		
	</view>

</template>

<script>
	import {
		survey
	} from '@/api/survey/index.js'

	import Steps from './Steps.vue'
	export default {
		data() {
			return {
				id: '',
				info: {
					landlordName:'机构名称'
				},
				inputValue:'',
				cancelReasonShow:false

			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			survey.taskDetail({
				id: this.id
			}).then(res => {
				if (res.data.code == 200) {
					this.info = res.data.data
				}
			});
		},
		methods: {
			showCancelReason(){
				this.cancelReasonShow=true;
			},
			closeCancelReasonAlert(){
				this.cancelReasonShow=false;
				this.inputValue=null;
				uni.$emit('refresh');
			},
			clickCheck(flag) {
				if(flag==4){
					if(this.inputValue==null||this.inputValue==""){
						this.$refs.uToast.show({
							message: '请填写取消勘验原因！',
							type: "error"
						})
						return;
					}else{
						survey.ensure({
							remark:this.inputValue,
							ensure: flag,
							id: this.id
						}).then(res => {
							if (res.data.code == 200) {
								uni.switchTab({
									url: '/pages/survey/survey',
									success() {
										uni.$emit('refresh')
									}
								})
							}
						});
					}
				}else{
					this.inputValue="可勘验";
					survey.ensure({
						remark:this.inputValue,
						ensure: flag,
						id: this.id
					}).then(res => {
						if (res.data.code == 200) {
							uni.switchTab({
								url: '/pages/survey/survey',
								success() {
									uni.$emit('refresh')
								}
							})
						}
					});
				}
				
					
				
				

			},

			contactLandlord({
				landlordPhone
			}) {
				uni.makePhoneCall({
					phoneNumber: landlordPhone
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.wrapper {
		padding-bottom: 100rpx;

		.bottom {
			width: 100%;
			position: fixed;
			bottom: 0;

			.time {
				height: 80rpx;
				background-color: #fff4de;
				display: flex;
				justify-content: center;
				align-items: center;

				/deep/ .u-count-down__text {
					color: #eeaf78;
				}
			}

			.btns {
				display: flex;
				padding: 0rpx 60rpx 40rpx 60rpx;
				justify-content: space-between;

				.space {
					width: 40rpx;
				}
			}

		}
	}
</style>